import React from 'react'
import {SearchBar, Toast, Tabs} from "antd-mobile";
import CarouselImage from "../../components/carousel";
import {withRouter} from 'react-router-dom';

import "./icon.css"
import food1 from '../../assets/products/foot1.jpg'
import food2 from '../../assets/products/food2.jpg'
import request from "../../utils/request";
import styles from './index.module.css'

const list = [
    {
        title: '节日礼品',
        icon: 'icon-gift-fill'
    },
    {
        title: '火热商品',
        icon: 'icon-fire-fill'
    },
    {
        title: '电脑办公',
        icon: 'icon-desktop'
    }
];


const data = list.map(item => ({
    icon: (<i className={`iconfont ${item.icon}`} style={{fontSize: 50, color: '#999999'}}/>),
    text: item.title,
}));


const productList = [
    {
        id: 1,
        image: food1,
        title: '福气杯功夫茶杯',
        price: 100.20,
        sale: 20
    },
    {
        id: 2,
        image: food2,
        title: '龙泉陶瓷杯',
        price: 20.20,
        sale: 100
    },
    {
        id: 3,
        image: food2,
        title: '龙泉陶瓷杯',
        price: 20.20,
        sale: 100
    },
];

const ChunkProduct = withRouter(({item, history}) => {
    return (

        <div className={styles.box}>
            <img src={item.image} alt={"product1"} style={{width: '100%', borderRadius: '8px 8px 0 0'}}
                 onClick={() => {
                     history.push(`/goods/index/${item.id}`)
                 }}/>
            <div style={{padding: '0 5px 5px 5px'}}>
                <div style={{fontSize: '18px', fontWeight: 800, margin: '10px 0'}}>{item.title}</div>
                <div style={{fontSize: '16px', fontWeight: 800, margin: '5px 0'}}>¥{item.price}</div>
                <div>已售 {item.sales} <i className={"iconfont icon-shopping-fill"}/></div>
            </div>
        </div>
    );
});

const tabs = [
    {
        inx: 0,
        title: <div>热销<i className={"iconfont icon-fire"}/></div>
    },
    {
        inx: 1,
        title: <div>秒杀<i className={"iconfont icon-thunderbolt"}/></div>
    },
];

class Index extends React.Component {


    state = {
        categoryList: [],
        hotProductList: [],
        secondKillProductList: []
    };

    renderCategory = () => {

        console.log(123);
        return this.state.categoryList.map((item) => ({
            icon: (<i className={`iconfont ${item.icon}`} style={{fontSize: 50, color: '#999999'}}/>),
            text: item.title,
        }));
    };


    renderContent = (tab) => {

        console.log(tab.inx);
        console.log('renderContent');
        return (
            <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                marginBottom: '15px',
                marginTop: '20px'
            }}>
                {
                    productList.map((item, inx) => {
                        return (
                            <ChunkProduct item={item} key={inx}/>
                        );
                    })
                }
            </div>
        );
    };

    componentDidMount() {

        request('/index/products').then((result) => {

            const {data: {hotProductList, secondKillProductList}} = result;

            const newHotProductList = hotProductList.map((item) => ({
                id: item.id,
                image: food1,
                title: item.name,
                price: item.price,
                sales: item.sales
            }));

            const newSecondKillProductList = secondKillProductList.map((item) => ({
                id: item.id,
                image: food1,
                title: item.name,
                price: item.price,
                sales: item.sales
            }));

            this.setState({
                hotProductList: newHotProductList,
                secondKillProductList: newSecondKillProductList
            });
        }).catch((err) => {
            console.log(err);
            Toast.fail('请求失败', 2)
        });
    }


    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate');
    }

    render() {

        console.log("render");
        return (
            <div style={{backgroundColor: 'white', height: '100%', textAlign: 'center', padding: '0 10px'}}>
                <div><SearchBar placeholder="Search" maxLength={8}/></div>
                <CarouselImage/>
                <Tabs tabs={tabs}
                      initialPage={0}
                      onChange={(tab, index) => {
                          console.log('onChange', index, tab);
                      }}
                      prerenderingSiblingsNumber={0}
                >
                    <div className={styles.productContent}>
                        {
                            this.state.hotProductList.map((item, inx) => {
                                return <ChunkProduct item={item} key={inx}/>
                            })
                        }
                    </div>
                    <div className={styles.productContent}>
                        {
                            this.state.secondKillProductList.map((item, inx) => {
                                return <ChunkProduct item={item} key={inx}/>
                            })
                        }
                    </div>
                </Tabs>

                {/*<Grid data={this.renderCategory()} columnNum={3} hasLine={false} activeStyle={false}/>*/}
                {/*<div style={{*/}
                {/*    display: 'flex',*/}
                {/*    justifyContent: 'space-between',*/}
                {/*    marginBottom: '15px',*/}
                {/*    marginTop:'20px'*/}
                {/*}}>*/}
                {/*    {*/}
                {/*        productList.map((item, inx) => {*/}
                {/*            return (*/}
                {/*                <ChunkProduct imageSrc={item.image} title={item.title} price={item.price} key={inx}*/}
                {/*                              sale={item.sale}/>*/}
                {/*            );*/}
                {/*        })*/}
                {/*    }*/}
                {/*</div>*/}
            </div>
        );
    }
}

export default Index

